<template>
  <view class="list-wrap">
		<scroll-view scroll-y class="list">
			<view class="item" v-for="(item,key) in listData" :key="key">
				<view class="title">{{key}}</view>
				<view class="sub-item" v-for="(subItem, index) of listData[key]" :key="index" @click.stop="handleDetail(subItem)">
					<image :src="(subItem.userPhoto.length && subItem.userPhoto) ? subItem.userPhoto:desc"></image>
					<text>{{subItem.userName}}</text>
				</view>
			</view>
		</scroll-view>
  </view>
</template>

<script>
export default {
  name: 'list',
  props: {
    listData: {
      type: Object,
      default() {
        return {
				}
      }
    }
  },
	data() {
		return {
			desc: '/static/images/analyze/def_user.png'
		}
	},
	methods:{
		handleDetail(item) {
			const identity = item.ifHeadmaster === 2 ? '班主任': item.classNameAndCourseName ? `${item.classNameAndCourseName.split('-')[1]}老师` : ''
			const userInfo = uni.getStorageSync('USER_INFO')
			const school = JSON.parse(userInfo).schoolName
			const info = {
				userName: item.userName,
				userSex: item.userSex,
				userPhone: item.userPhone,
				userId: item.userId,
				identity,
				school,
				className: item.classNameAndCourseName ? `${item.classNameAndCourseName.split('-')[0]}` : JSON.parse(userInfo).className,
				userPhoto:  escape(item.userPhoto)
			}
			console.log(info)
			uni.navigateTo({
				url: `/pages/address-book/children/detail/index?params=${JSON.stringify(info)}`
			})
		}
	}
}

</script>
<style lang='scss' scoped>
.list-wrap{
	width: 100%;
	height: calc(100vh - 374upx);
}
.list{
  width: 100%;
	height: 100%;
  .item{
    width: 100%;
    background-color: #fff;
    .title{
      background-color: #F0F0F0;
      width: 100%;
      height: 60upx;
      line-height: 60upx;
      font-size: 28upx;
      font-weight: 500;
      color: #999;
			text-indent: 20upx;
    }
		.sub-item{
			width: 100%;
			display: flex;
			justify-items: center;
			align-items: center;
			padding: 0 20upx;
			height: 116upx;
			border-bottom: 1upx solid #E1E1E1;
			box-sizing: border-box;
			&:avtive{
				background-color: #f5f5f5;
			}
			image{
				width:72upx;
				height:72upx;
				border-radius:50%;
				background-color: #e6e6e6;
			}
			text {
				margin-left: 20upx;
				flex: 1;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 30upx;
				color: #333;
			}
		}
  }
}
</style>